<template>
  <div class="box">
    <van-tabs v-model:active="active" title-active-color="#352C5D">
      <van-tab v-for="index in titlelist" :title="index.title">
        <div class="my_kuanbox">
          <div class="my_kuan" >
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-deng"></span>
              <p>客厅灯</p>
              <span>功率235w</span>
            </div>
          </div>
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked2" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-luyouqi"></span>
              <p>路由器</p>
              <span>91.59Mbit/s</span>
            </div>
          </div>
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked3" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-kongdiaogongcheng"></span>
              <p>空调</p>
              <span>27℃</span>
            </div>
          </div>
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked4" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-tv"></span>
              <p>TV</p>
              <span>盒子</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- <van-tabs v-model:active="active" type="card" title-active-background-color="red">
      <van-tab v-for="index in titlelist" :title="index.title">
        <div class="my_kuanbox">
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-deng"></span>
              <p>客厅灯</p>
              <span>功率235w</span>
            </div>
          </div>
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-luyouqi"></span>
              <p>路由器</p>
              <span>91.59Mbit/s</span>
            </div>
          </div>
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-kongdiaogongcheng"></span>
              <p>空调</p>
              <span>27℃</span>
            </div>
          </div>
          <div class="my_kuan">
            <div class="my_kai">
              <div>NO</div>
              <div><van-switch v-model="checked" active-color="#7033FF" inactive-color="#FB8F66" /></div>
            </div>
            <div class="my_cont">
              <span class="iconfont icon-tv"></span>
              <p>TV</p>
              <span>盒子</span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
let active = ref()
const checked1 = ref(false);
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
let obj = reactive({
  titlelist: [
    {
      title: '全部'
    },
    {
      title: '卧室',
    },
    {
      title: '厨房',
    },
    {
      title: '浴室',
    }
  ]
})
let { titlelist } = toRefs(obj)
</script>
<style scoped >
.my_kuanbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}

.my_kuan {
  width: 15rem;
  height: 20rem;
  margin-top: 1rem;
  border-radius: 2rem;
  color: #ABA3CF;
}

.my_kai {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #ABA3CF;
  margin-top: 1rem;
}

.my_cont {
  text-align: center;
  color: #ABA3CF;
}

.my_kuan:hover {
  background-color: #352C5D;
}

.van-tab--card.van-tab--active {
  background-color: rebeccapurple;
}
</style>